<template>
  <div class="input-container">
    <!-- 可滚动输入框 -->
    <textarea
      v-model="userInput"
      :placeholder="placeholder"
      @keydown="handleKeyDown"
      class="scrollable-textarea"
      :disabled="disabled"
    ></textarea>

    <!-- 底部工具栏 -->
    <div class="footer-toolbar">
      <!-- 提示文字 -->
      <span class="hint-text">Shift+回车为换行/回车发送</span>

      <!-- 发送按钮 -->
      <el-button type="primary" @click="submit" class="send-button" :disabled="disabled">发送</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Input',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入您的辩论观点...'
    }
  },
  data() {
    return {
      userInput: '' // 用户输入的文本
    }
  },
  methods: {
    /**
     * 处理键盘事件，当按下回车键且未按住Shift时，阻止默认行为并触发提交
     * @param {Event} event - 键盘事件对象
     */
    handleKeyDown(event) {
      if (this.disabled) return;

      if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault(); // 阻止默认的换行行为
        this.submit(event);
      }
    },

    /**
     * 提交用户输入的信息
     * @param {Event} event - 事件对象
     */
    submit(event) {
      if (this.disabled) return;

      if (this.userInput.trim()) {
        const message = {
          text: this.userInput.trim()
        };
        this.$emit('send', message); // 向父组件发送数据
        this.userInput = ''; // 清空输入框
      }
    }
  }
}
</script>

<style scoped>
.input-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.scrollable-textarea {
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  min-height: 100px;
  max-height: 150px;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #fff;
  color: #333;
  outline: none;
  margin-bottom: 5px;
  resize: none;
}

.scrollable-textarea:disabled {
  background-color: #eee;
  color: #999;
}

.footer-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.hint-text {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  margin-right: 10px;
  line-height: 30px;
  flex: 1;
}

.send-button {
  height: 32px;
  font-size: 14px;
  padding: 0 20px;
  background-color: #A3BE8C;
  border-color: #A3BE8C;
}

.send-button:hover:not(:disabled) {
  background-color: #8FAE77;
  border-color: #8FAE77;
}

.send-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 美化滚动条 */
.scrollable-textarea::-webkit-scrollbar {
  width: 6px;
}

.scrollable-textarea::-webkit-scrollbar-thumb {
  background-color: #A3BE8C;
  border-radius: 3px;
}

.scrollable-textarea::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}
</style> 